<template>
	<view>
		<uni-section title="表单校验" type="line">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="workInfo" :rules="rules" :modelValue="workInfo">
					<uni-forms-item label="单词" required name="word"><uni-easyinput v-model="workInfo.word" placeholder="请输入单词" /></uni-forms-item>
					<uni-forms-item label="释义" required name="mean"><uni-easyinput v-model="workInfo.mean" placeholder="请输入单词释义" /></uni-forms-item>
					<uni-forms-item label="英·例句" name="enExample"><uni-easyinput type="textarea" v-model="workInfo.enExample" placeholder="英语单词例句" /></uni-forms-item>
					<uni-forms-item label="英译汉" name="cnExample"><uni-easyinput type="textarea" v-model="workInfo.cnExample" placeholder="英语例句释义" /></uni-forms-item>
				</uni-forms>
				<view class="example-body">
					<uni-file-picker ref="imgTop" limit="3" title="最多选择3张图片" :auto-upload="false"></uni-file-picker>
				</view>
				<button type="primary" @click="submit('workInfo')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
export default {
	data() {
		return {
			workInfo: {
				word: '',
				mean: '',
				cnExample: '',
				enExample: '',
				time: new Date().getTime()
			},
			tempFilePaths:[],
			rules: {
				word: {
					rules: [
						{
							required: true,
							errorMessage: '单词不能为空'
						}
					]
				},
				mean: {
					rules: [
						{
							required: true,
							errorMessage: '释义不能为空'
						}
					]
				}
			}
		};
	},
	methods:{
		addWork(){
			uniCloud.callFunction({
				name:'add-work',
				data:{
					...this.workInfo,
					imgUrls:this.tempFilePaths
				}
			}).then(data=>{
				uni.showToast({
					title:"单词新增成功"
				})
				setTimeout(()=>{
					uni.hideToast()
					uni.reLaunch({
						url:'/pages/work-list/work-list'
					})
				},600)
			})
		},
		submit(ref) {
			this.$refs[ref].validate().then(res=>{
				return this.$refs['imgTop'].upload()
			}).then(res=>{
				this.tempFilePaths = res.map(item=>{
					return item["url"]
				})
				this.addWork()
			}).catch(err => {
				console.log('err', err);
			})
		}
	}
	
};
</script>

<style lang="scss"></style>




